<template>
  <div>
    <task-controller
      :task-type="taskType"
      :format-task-list-column="formatTaskListColumn"
      :format-task-form-render="formatTaskUpdateForm"
      :format-time-list-column="formatTimeListColumn"
      :format-time-form-render="formatTimeUpdateForm"
    />
  </div>
</template>

<script>

import TaskController from '../components/index'
import { parseTime } from '@/utils'
import { fetchDropPartAllList } from '@/api/common/commonDropDown'

const column = [

  { key: 'name', label: '标题', minWidth: 120 },
  { key: 'beginDate', label: '任务时间', width: 190,
    render: (_, rocord) => parseTime(rocord.row.beginDate, 'YYYY-MM-DD') + ' 至 ' + parseTime(rocord.row.endDate, 'YYYY-MM-DD') },
  { key: 'content', label: '巡查内容', minWidth: 200 },
  { key: 'recordCount', label: '子任务数量', minWidth: 100 },
  {
    key: 'createTime',
    label: '创建时间',
    minWidth: 160,
    render: (_, rocord) => parseTime(rocord.row.createTime)
  }
]

const taskUpdateForm = [
  { type: 'input', label: '任务名称', required: true, key: 'name', col: 24, slotAttrs: { style: { width: '91.5%' }}},
  { type: 'dateTime', label: '排班日期', required: true, slotAttrs: { type: 'daterange', style: { width: '91.5%' }}, key: 'time', subKey: ['beginDate', 'endDate'], col: 24 },

  { type: 'select', label: '巡查区域', required: true, key: 'componentId', slotAttrs: { options: [], multiple: true, style: { width: '91.5%' }}, col: 24 },
  { type: 'input', label: '巡查内容', required: true, key: 'content', col: 24, slotAttrs: { rows: '2', type: 'textarea', style: { width: '91.5%' }}}
]

const PART_TYPE_PATROL = 1 // 巡查区域 部件类型 (1 片区 4 片区加道路)

export default {
  components: { TaskController },
  data: function() {
    const formatTaskListColumn = () => {
      return Promise.resolve(column)
    }

    const formatTaskUpdateForm = (formRender) => {
      return this.postPatrolAreaList().then(res => {
        taskUpdateForm[2].slotAttrs.options = res.map(e => ({ key: e.id, value: e.name }))
        return Promise.resolve(taskUpdateForm)
      })
    }

    const formatTimeUpdateForm = (formRender) => {
      formRender[0].label = '巡查时间'
      formRender[1].slotAttrs.style = { width: '95.5%' }
      formRender[1].col = 24
      formRender[1].label = '巡查人员'
      const filterList = ['frequency', 'carId']
      const render = formRender.filter(e => !filterList.includes(e.key))
      return Promise.resolve(render)
    }

    const formatTimeListColumn = (column) => {
      const result = column.filter(e => e.key !== 'carPlatenumber')
      result[3].label = '巡查员'
      return Promise.resolve(result)
    }

    return { taskType: 4, formatTaskListColumn, formatTaskUpdateForm, formatTimeUpdateForm, formatTimeListColumn }
  },

  methods: {
    postPatrolAreaList() {
      return fetchDropPartAllList({ type: PART_TYPE_PATROL })
    }
  }
}
</script>
